<template>
  <div>
    <el-button :key="key" v-for="item,key in data" :type="item.type" :icon="item.icon" size="mini" @click="handlerAction(value,item.callback)">{{item.label}}</el-button>
    <Alert v-model="display" :config="config" :data="alertData" />
  </div>
</template>
<script type="text/javascript">
import Alert from './TableAlert'

//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')

export default {
  name:"tableaction",
  props: {
    value: [Array, Object],
    data: [Array, Object],
  },
  data() {
    return {
      display: false, // 打开alert弹窗
      alertData:{},    // alert弹出窗数据
      config: {
        title: '提示',
        width: "40%",
      },

      fieldKey:null,  //唯一码
    }
  },
  components: {
    Alert,
  },

  inject:['field_key'],
  computed:{
    ...mapState(['tableData']),
  },
  created(){

  },
  methods: {
    ...mapActions(['onAsynchronous']),
    /**
     * 表格操作
     * @param  {[type]}   data     [description]
     * @param  {Function} callback [description]
     * @return {[type]}            [description]
     */
    handlerAction( data, callback) {
      console.log('操作数据', data);
      if (callback) {
        switch (callback.type) {
          //对话框
          case "message":
            this.deployMessage(data, callback);
            break;
            //模态框
          case "alert":
            this.deployAlert(callback.config,data);
            break;
            //默认操作
          case "target":
            this.deployTarget(data, callback);
            break;
          default:
            this.deployDefault(callback);
        }
      }

    },

    /**
     * 直接调用异步操作
     * @param  {[Function]}   callback     [回调方法]
     * @return {[type]} [description]
     */
    deployDefault(callback){
      let fieldKey = this.field_key;  //唯一标识码
      let data = this.tableData[fieldKey];
      let model = callback.url[0];          //模块名
      let action = callback.url[1];         //方法名

      var syntony = function(){           //回调函数
        this.$message({
          type: callback.confirmTips.type,
          message: callback.confirmTips.message
        });
      }

      this.onAsynchronous({
        model: model,
        action: action,
        data: data,
        key:fieldKey,
        callback: syntony
      });

    },


    /**
     * 配置消息弹窗
     * @param  {[Object]}   data     [单条数据]
     * @param  {Function} callback   [回调方法]
     * @return {[type]}            [description]
     */
    deployMessage(data, callback) {
      let config = callback.config;     //消息配置
      let fieldKey = this.field_key;  //唯一标识码
      let model = callback.url[0];					//模块名
      let action = callback.url[1];					//方法名
      var params = {};								//参数
      for (var key in callback.params) {
        if(Array.isArray(data)){
          // 批量
          // 如果批量未选择则结束执行
          if(!data.length > 0){
            return false;
          }

          var arr = [];
          for(var i = 0 ; i<data.length; i++){
            arr.push(data[i][callback.params[key]]);
          }
          params[callback.params[key]] = arr;
        }else{
          params[callback.params[key]] = data[callback.params[key]]
        }

      }

      var syntony = function(){						//回调函数
        this.$message({
          type: config.confirmTips.type,
          message: config.confirmTips.message
        });
      }

      this.$confirm(config.content, config.title, {
        confirmButtonText: config.confirm,
        cancelButtonText: config.cancel,
        type: config.type,
      }).then(() => {
        this.onAsynchronous({
          model: model,
          action: action,
          data: params,
          key:fieldKey,
          callback: syntony
        });
      }).catch(() => {
        this.$message({
          type: config.cancelTips.type,
          message: config.cancelTips.message
        });
      });
    },

    /**
     * 配置alert弹窗
     * @param  {[type]} config [description]
     * @return {[type]}        [description]
     */
    deployAlert(config,data) {
      this.display = true;
      this.config = config;   //配置，
      this.alertData = data;  // 数据
    },

    /**
     * 直接跳转页面
     * @param  {[type]}   data     [description]
     * @param  {Function} callback [description]
     * @return {[type]}            [description]
     */
    deployTarget(data, callback) {
      var params = {};
      for (var key in callback.params) {
        params[callback.params[key]] = data[callback.params[key]]
      }
      this.$router.push({
        path: callback.path,
        query: params
      })
    }
  }
}

</script>
<style type="text/css">
</style>
